<template>
	<view class="container">
		<view class="title">团体预约</view>
<<<<<<< HEAD
		<view class="time">
			<image src="../../static/image/屏幕截图 2024-07-11 100529(1).png" class="shizhong"></image>
			<text style="margin-left: 20px;font-size: 16px;font-weight:700;">预约入园时间\n</text>
			<text style="margin-left: 67px;">2024年7月16日</text>
=======
		<view class="form-group">
			<label>预约日期：</label>
			<picker mode="date" :value="date" @change="onDateChange">
				<view class="picker">{{ date }}</view>
			</picker>
		</view>
		<view class="form-group">
			<label>预约时间：</label>
			<picker mode="time" :value="time" @change="onTimeChange">
				<view class="picker">{{ time }}</view>
			</picker>
		</view>
		
		<view class="form-group">
			<label>团队名称：</label>
			<input type="text" v-model="teamName" placeholder="请输入团队名称" />
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
		</view>
		<view style="font-size: 17px;font-weight: 600;">预约信息</view>
		<view class="massage">
			<view class="form-group">
				<label>团队名称：</label>
				<input class="name" type="text" v-model="teamName" placeholder="请输入团队名称" />
			</view>
			<view class="form-group">
				<label>团体人数：</label>
				<input class="people" type="number" v-model.number="totalPeople"
					placeholder="团体所有人数(负责人,随团工作人员,游客等.)" />
			</view>
		</view>
		<view class="form-group" v-for="(member, index) in members" :key="index">
<<<<<<< HEAD
			<label style="font-weight: 600;">团体负责人 {{ index + 1 }}：</label>
			<view class="team">
				<view>
					<label style="font-weight: 600;">姓名：</label>
					<input class="mName" type="text" v-model="member.name" placeholder="请输入同行人姓名" />
				</view>
				<view>
					<label style="font-weight: 600;">证件类型：</label>
				<input class="mName" type="text" v-model="member.idType" placeholder="请输入证件类型" />
				</view>
				<view>
					<label style="font-weight: 600;">证件号码：</label>
				<input class="mName" type="text" v-model="member.idNumber" placeholder="请输入证件号码" />
				</view>
				<view>
					<label style="font-weight: 600;">手机号码：</label>
				<input class="mName" type="number" v-model.number="member.phoneNumber" placeholder="请输入手机号码" />
				</view>
			</view>
			<button @click="removeMember(index)" class="del" style="font-weight: 400;color: white;">删除</button>
=======
			<label>成员 {{ index + 1 }}：</label>
			<input type="text" v-model="membername" placeholder="姓名" />
			<input type="text" v-model="memberidType" placeholder="证件类型" />
			<input type="text" v-model="memberidNumber" placeholder="证件号码" />
			<input type="number" v-model.number="memberphoneNumber" placeholder="手机号码" />
			<button @click="removeMember(index)">删除</button>
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
		</view>
		<button @click="addMember" class="add">添加同行人</button>


		<view class="">
<<<<<<< HEAD

			<button @click="submitReserve" class="admit" style="font-weight: 600;color: white;">提交预约</button>

=======
			
				<button @click="submitReserve">提交预约</button>
			
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '2024-7-16',
				time: '09:00:00',
				teamName: '',
				totalPeople: '',
				members: [{
					name: '',
					idType: '',
					idNumber: '',
					phoneNumber: ''
				}, ],
			};
		},
	
		methods: {
			
			onDateChange(e) {
				this.date = e.detail.value;
			},
			onTimeChange(e) {
				this.time = e.detail.value;
			},
			onIdTypeChange(e) {
				this.idTypeIndex = e.detail.value;
			},
			
			addMember() {
				if (this.members.length < this.totalPeople) {
					this.members.push({
						name: '',
						idType: '',
						idNumber: '',
						phoneNumber: ''
					});
				} else {
					uni.showToast({
						title: '已达到预约人数上限',
						icon: 'none'
					});
				}
				
				
				
			},
			removeMember(index) {
				if (this.members.length > 1) { // 假设至少保留一个成员  
					this.members.splice(index, 1);
					this.updateTotalPeople();
				}
			},
			updateTotalPeople() {
				this.totalPeople = this.members.length;
			},
			submitReserve() {
<<<<<<< HEAD
				uni.navigateTo({
					url: '/pages/successfulAppoGroup/successfulAppoGroup'
=======
				const userData = {
					date:this.date,
					time:this.time,
					teamName: this.teamName,
					totalPeople: this.totalPeople,
					membername: this.membername,
					memberidType: this.memberidType,/*[this.memberidTypeIndex],*/
					memberidNumber: this.memberidNumber,
					memberphoneNumber: this.memberphoneNumber,

				};
				
				uni.setStorage({
					key: 'userData',
					data:JSON.stringify(userData),
					success:function(){
						 console.log('数据存储成功');
						 uni.navigateTo({
						 	url:'/pages/successfulAppoGroup/successfulAppoGroup'
						 })
					}
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
				})
				
				
				// 这里可以添加提交到服务器的逻辑  
				const reservation = {
					teamName: this.teamName,
					totalPeople: this.totalPeople,
					members: this.members,
				};
				console.log('提交团体预约:', reservation);
				// 发送请求到服务器  
				// uni.request({...});  
			},
		},
	};
</script>

<style>
	/* 添加你的样式 */
	.container {
		padding: 20px;
		background-color: #f3f5f9;

	}

	.title {
		font-size: 17px;
		font-weight: bolder;
		margin-bottom: 20px;
		font-family: PingFangSC-Medium;
		margin-left: 150px;
	}

	.form-group {
		margin-bottom: 5px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.form-group label {
		margin-bottom: 5x;
	}

	.form-group button {
		margin-top: 10px;
	}
<<<<<<< HEAD

	.shizhong {
		height: 38px;
		width: 38px;
		margin-top: 5px;
		margin-left: 10px;
	}

	.time {
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		border-top-width: 5px;
	}

	.massage {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
	}

	.name {
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}

	.people {
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}

	.team {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
		width: 345px;
	}
	.mName{
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}
	.del{
		background-color: #8dcd6d;
		margin-right: 5px;
	}
	.add{
		border-radius: 20px;
		border-style: dotted #666;
		border: 2px;
	}
	.admit{
		background-color: #8dcd6d;
=======
	
	.picker {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
	}
</style>